<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	<link rel="stylesheet" href="layuiadmin/plugins/OrgCharts/js-orgCharts/css/OrgCharts.css" media="all">
	<link rel="stylesheet" href="layuiadmin/plugins/OrgCharts/js-orgCharts/css/my.css" />
	</head>
	
	<body>
		<div style="display: flex;flex-direction: row;">

			<div style="width: 50px;height: 800px;padding: 2px;text-align: center;">
				主题
				<div onclick="changeTheme('normal')" style="width: 30px;height: 30px;background: #3caee4;margin: 5px auto;cursor: pointer;"></div>
				<div onclick="changeTheme('red')" style="width: 30px;height: 30px;background: red;margin: 5px auto;cursor: pointer;"></div>
				<div onclick="changeTheme('green')" style="width: 30px;height: 30px;background: #1ce45a;margin: 5px auto;cursor: pointer;"></div>
				<div onclick="changeTheme('black')" style="width: 30px;height: 30px;background: #000000;margin: 5px auto;cursor: pointer;"></div>
				<div onclick="changeTheme('gray')" style="width: 30px;height: 30px;background: #6f6f6f;margin: 5px auto;cursor: pointer;"></div>

			</div>

			<div id="printArea" style="flex:1;display: block;text-align: center;">
				<div id="org_charts"></div>
			</div>
			
		</div>
<script type="text/javascript" src="layuiadmin/plugins/OrgCharts/js-orgCharts/js/OrgCharts.js"></script>
	<script type="text/javascript" src="js/jquery.jqprint.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
var pid=/*[[${pid}]]*/     
/*]]>*/
</script>
	<script type="application/javascript">
		var orgCharts=new OrgCharts();
		function draw() {
			//初始化组件  
			orgCharts.init({
				id: "org_charts", //必填
				theme: '', //可选
				success: function() { //可选
					//console.log("初始化完成")
				},
				error: function(e) { //可选
					//console.log(e);
				},
				onClick: function(el, data) { //点击方法  el被点击的元素  data对应传入数据
					//console.log(data.id);
					
				}
			});

			orgCharts.drawByUrl({
				url: 'org/getOrgChart?pid='+pid,
				success: function() { 
				},
				error: function(e) { 
				}
			});
		}
		draw();
		function changeTheme(theme) {
			orgCharts.setTheme(theme);
		}
		function print(){
			 $("#printArea").jqprint({
			 debug: false, 
			 importCSS: true, 
			 printContainer: true, 
			 operaSupport: false
			 });
		}
	</script>
	</body>
	

</html>

